<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>TMOCC</title>
		<style>
			
			* {
				margin: 0;
				padding: 0;
				text-decoration: none;
				list-style: none;
			}

			.header {
				height: 71px;
				background-color: #4f8dfe;
			}

			.header-center {
				width: 1200px;
				height: 70px;
				margin: 0 auto;

			}

			.left {
				float: left;
			}

			.left img {
				margin-top: 15px;
			}

			.center {
				margin-left: 70px;
				float: left;
			}

			.center li {
				margin: auto 20px;
				float: left;

			}

			.center a {
				color: white;
				font-size: 16px;
				height: 70px;
				line-height: 70px;
			}

			.center a:hover {
				color: black;
			}

			.right {
				float: right;
			}

			.right li {
				float: left;
				margin: auto 10px;
			}

			.right a {
				font-size: 14px;
				color: white;
				height: 70px;
				line-height: 70px;
			}

			.right .a-fist {
				padding-right: 18px;
				border-right: white 1px solid;
			}
			.bg{
				margin: 0;
				padding: 0;
				height: 441px;
				background-color:#fff;
			}

			.banner {
				margin: 0 auto;
				margin-top: 40px;
				border-radius: 16px;
				width: 1200px;
				height: 441px;
				box-shadow: 0px 3px 13px 0px gray;
			}

			.banner .b-left {
				float: left;
				border-radius: 16px 0 0 16px;
				width: 225px;
				height: 441px;
				background-color: #292d32;
				position: relative;
			}

			.banner .b-left ul li {
				border-bottom: 1px #1c252d solid;
				height: 62px;
				text-align: center;
			}

			.banner .b-left ul li:nth-child(7) {
				border-bottom: 0;
				height: 63px;
			}

			.banner .b-left a {
				font-size: 16px;
				color: #999999;
				height: 62px;
				line-height: 62px;
				display: block;
			}

			.banner .b-left li:hover {
				background-color: #ffffff;
			}
			.banner .b-left li:nth-child(1):hover{
				border-radius:15px 0 0 0 ;
			}
			.banner .b-left li:nth-child(7):hover{
				border-radius:0 0 0 15px ;
			}

			.banner .b-left a:hover {
				color: #000000;
			}

			.banner .b-right {
				float: left;
				border-radius: 0 16px 16px 0;
				width: 975px;
				height: 441px;
			}

			.b-right .r-up {
				width: 975px;
				height: 334px;
				border-radius: 0 16px 0 0;
			}

			.b-right .box img {
				border-radius: 0 16px 0 0;
			}

			.b-right .r-down {
				width: 975px;
				height: 107px;
				border-radius: 0 0 16px 0;
				background-color: #FFFFFF;
			}

			.b-right .r-down li {
				float: left;
				text-align: center;
				width: 200px;
				height: 107px;
				line-height: 107px;
				margin: 0 21px;
			}

			.b-right .r-down a {
				height: 75px;
				line-height: 75px;
				font-size: 16px;
				color: #000000;
			}

			.b-right .r-down ul {
				margin-top:0px;
			}

			.b-right .r-down li:hover {
				background-color: #f6f6f9;
			}
			.box{
				width: 975px;
				height: 334px;
				position: relative;
			}
			.ul1{
				width: 100%;
				height: 100%;
			}
			.ul1>li{
				position: absolute;
				top: 0;
				left: 0;
			}
			.box:hover .right-botton,
			.box:hover .left-botton{
				display: block;
			}
			.left-botton{
				width: 35px;
				height: 70px;
				background-color: #00000050;
				color: #fff;
				text-align: center;
				line-height: 70px;
				position: absolute;
				top: 126px;
				border-radius: 0 5px 5px 0;
				display: none;
				
			}
			.left-botton:hover,.right-botton:hover{
				background-color: #333;
				color: #999999;
				cursor: pointer;
			}
			.right-botton{
				width: 35px;
				height: 70px;
				background-color: #00000050;
				color: #fff;
				text-align: center;
				line-height: 70px;
				position: absolute;
				top: 126px;
				right: 0;
				border-radius:  5px 0 0 5px ;
				display: none;
				
			}
			.ul2{
				position: absolute;
				bottom: 10px;
				right: 30px;
			}
			.ul2>li{
				width: 15px;
				height: 15px;
				background-color: #fff;
				border-radius: 50%;
				text-align: center;
				float: left;
				margin-left: 10px;
			}
			.ul2>li:hover{
				background-color: red;
				color: #fff;
				cursor: pointer;
			}
			.ul2>li:nth-child(1){
				background-color: red;
				color: #fff;
			}
			.ul1>li:nth-child(1){
				z-index: 100;
			}
			.index{
				z-index: 1000;
			}
			.main{
				margin-top: 0;
				background-color: #f6f5fa;
				height: 1210px;
				margin-top: 1px;
			}
			.b-left .b-1,
			.b-left .b-2,
			.b-left .b-3,
			.b-left .b-4,
			.b-left .b-5,
			.b-left .b-6,
			.b-left .b-7{
				position: absolute;
				width: 780px;
				height: 441px;
				background-color: #FFFFFF;
				top: 0;
				left: 225px;
				z-index: 10000;
				display: none;
				
			}
			.b-left li:hover .b-1,
			.b-left li:hover .b-2,
			.b-left li:hover .b-3,
			.b-left li:hover .b-4,
			.b-left li:hover .b-5,
			.b-left li:hover .b-6,
			.b-left li:hover .b-7{
				display: block;
			}
			.b-left .b-1 div:nth-child(1),
			.b-left .b-2 div:nth-child(1),
			.b-left .b-3 div:nth-child(1),
			.b-left .b-4 div:nth-child(1),
			.b-left .b-5 div:nth-child(1),
			.b-left .b-6 div:nth-child(1),
			.b-left .b-7 div:nth-child(1){
				background-color: #FFFFFF;
				height: 100px;
				font-size: 16px;
				border-bottom: 1px solid #eae9e9;
				
			}
			.b-left .b-1 div:nth-child(2),
			.b-left .b-2 div:nth-child(2),
			.b-left .b-3 div:nth-child(2),
			.b-left .b-4 div:nth-child(2),
			.b-left .b-5 div:nth-child(2),
			.b-left .b-6 div:nth-child(2),
			.b-left .b-7 div:nth-child(2),{
				background-color: #FFFFFF;
				height: 210px;
				font-size: 16px;
					
			}
			.clear{
				clear: both;
			}
			.b-left .b-1 div:nth-child(4) img
			{
				margin: 45px;
				float: left;
				width: 300px;
				text-align: center;
				transition: 1s;
			}
			.b-left .b-2 div:nth-child(4) img,
			.b-left .b-3 div:nth-child(4) img,
			.b-left .b-4 div:nth-child(4) img,
			.b-left .b-5 div:nth-child(4) img,
			.b-left .b-6 div:nth-child(4) img,
			.b-left .b-7 div:nth-child(4) img{
				padding-top: 60px;
				margin: 45px;
				float: left;
				width: 300px;
				text-align: center;
				transition: 1s;
			}
			.b-left .b-1 div:nth-child(4) img:hover,
			.b-left .b-2 div:nth-child(4) img:hover,
			.b-left .b-3 div:nth-child(4) img:hover,
			.b-left .b-4 div:nth-child(4) img:hover,
			.b-left .b-5 div:nth-child(4) img:hover,
			.b-left .b-6 div:nth-child(4) img:hover,
			.b-left .b-7 div:nth-child(4) img:hover{
				cursor: pointer;
				filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;
			}
			.banner .b-left .b-1 div:nth-child(1) a,
			.banner .b-left .b-1 div:nth-child(2) a,
			.banner .b-left .b-2 div:nth-child(1) a,
			.banner .b-left .b-2 div:nth-child(2) a,
			.banner .b-left .b-3 div:nth-child(1) a,
			.banner .b-left .b-3 div:nth-child(2) a,
			.banner .b-left .b-4 div:nth-child(1) a,
			.banner .b-left .b-4 div:nth-child(2) a,
			.banner .b-left .b-5 div:nth-child(1) a,
			.banner .b-left .b-5 div:nth-child(2) a,
			.banner .b-left .b-6 div:nth-child(1) a,
			.banner .b-left .b-6 div:nth-child(2) a,
			.banner .b-left .b-7 div:nth-child(1) a,
			.banner .b-left .b-7 div:nth-child(2) a{
				float: left;
				margin-left: 30px;
				padding: 10px 10px;
				margin-top: 30px;
				color: #999;
				width: 120px;
				height: 10px;
				line-height: 10px;
				text-align: center;
			}
			.banner .b-left .b-1 div:nth-child(1) a:hover,
			.banner .b-left .b-1 div:nth-child(2) a:hover,
			.banner .b-left .b-2 div:nth-child(1) a:hover,
			.banner .b-left .b-2 div:nth-child(2) a:hover,
			.banner .b-left .b-3 div:nth-child(1) a:hover,
			.banner .b-left .b-3 div:nth-child(2) a:hover,
			.banner .b-left .b-4 div:nth-child(1) a:hover,
			.banner .b-left .b-4 div:nth-child(2) a:hover,
			.banner .b-left .b-5 div:nth-child(1) a:hover,
			.banner .b-left .b-5 div:nth-child(2) a:hover,
			.banner .b-left .b-6 div:nth-child(1) a:hover,
			.banner .b-left .b-6 div:nth-child(2) a:hover,
			.banner .b-left .b-7 div:nth-child(1) a:hover,
			.banner .b-left .b-7 div:nth-child(2) a:hover{
				color: #4F8DFE;
				cursor: pointer;
			}
			.banner .b-left .b-1 div:nth-child(1) a:nth-child(1),
			.banner .b-left .b-1 div:nth-child(2) a:nth-child(1),
			.banner .b-left .b-2 div:nth-child(1) a:nth-child(1),
			.banner .b-left .b-2 div:nth-child(2) a:nth-child(1),
			.banner .b-left .b-3 div:nth-child(1) a:nth-child(1),
			.banner .b-left .b-3 div:nth-child(2) a:nth-child(1),
			.banner .b-left .b-4 div:nth-child(1) a:nth-child(1),
			.banner .b-left .b-4 div:nth-child(2) a:nth-child(1),
			.banner .b-left .b-5 div:nth-child(1) a:nth-child(1),
			.banner .b-left .b-5 div:nth-child(2) a:nth-child(1),
			.banner .b-left .b-6 div:nth-child(1) a:nth-child(1),
			.banner .b-left .b-6 div:nth-child(2) a:nth-child(1),
			.banner .b-left .b-7 div:nth-child(1) a:nth-child(1),
			.banner .b-left .b-7 div:nth-child(2) a:nth-child(1){
				float: left;
				margin-left: 30px;
				padding: 10px 10px;
				margin-top: 30px;
				color: #000000;
				width: 100px;
				height: 10px;
				line-height: 10px;
				text-align: center;
				background-color: #eeeeee;
				border-radius: 15px 15px 15px 15px;
			}
			.m-first {
				width: 1200px;
				padding: 0;
				margin: 0 auto;
			}
			.m-first div:nth-child(1),
			.m-first div:nth-child(3){
				height: 70px;
			}
			.m-first>div:nth-child(2){
				height: 240px;
			}
			.m-first>div:nth-child(2)>div:nth-child(1),
			.m-first>div:nth-child(2)>div:nth-child(2),
			.m-first>div:nth-child(2)>div:nth-child(3){
				float: left;
				width: 200px;
				height: 220px;
				background-color: white;
				margin-right: 50px;
				transition: 0.2s;
			}
			.m-first>div:nth-child(2)>div:nth-child(1):hover,
			.m-first>div:nth-child(2)>div:nth-child(2):hover,
			.m-first>div:nth-child(2)>div:nth-child(3):hover{
				box-shadow:0px 3px 13px 0px gray ;
				cursor: pointer;
				margin-top: -5px;
			}
			.m-first>div:nth-child(2)>div:nth-child(1)>img,
			.m-first>div:nth-child(2)>div:nth-child(2)>img,
			.m-first>div:nth-child(2)>div:nth-child(3)>img{
				margin-top: 0;
				height: 113px;
			}
			.m-first>div:nth-child(2)>div:nth-child(1)> ul,
			.m-first>div:nth-child(2)>div:nth-child(2)> ul,
			.m-first>div:nth-child(2)>div:nth-child(3)> ul{
				display: inline-block;
				padding: 15px 14px;
			}
			.m-first div:nth-child(2) div:nth-child(1) li,
			.m-first div:nth-child(2) div:nth-child(2) li,
			.m-first div:nth-child(2) div:nth-child(3) li{
				font-size: 14px;
			}
			.m-first div:nth-child(2) div:nth-child(1) span,
			.m-first div:nth-child(2) div:nth-child(2) span,
			.m-first div:nth-child(2) div:nth-child(3) span{
				display: inline-block;
				font-size: 14px;
				height: 20px;
				line-height: 20px;
				margin: 15px 15px;
			}
			.m-first div:nth-child(2) div:nth-child(2) a,
			.m-first div:nth-child(2) div:nth-child(3) a{
				color: gray;
				float: right;
				padding-left: 55px;
			}
			.m-first img{
				float: left;
				height: 40px;
				margin-top: 15px;
				margin-right: 10px;
				
			}
			.m-first div:nth-child(1) span,
			.m-first div:nth-child(3) span,
			.m-first div:nth-child(5) span,
			.m-first div:nth-child(7) span
			{
				float: left;
				height: 70px;
				line-height: 70px;
				text-align: center;
			}
			.m-first div:nth-child(1) a{
				height:70px ;
				color: #999999;
				float: right;
				line-height: 70px;
				font-size: 12px;
			}
			.m-first .m-center{
				height: 240px;
			}
			.m-center div:nth-child(1),
			.m-center div:nth-child(2),
			.m-center div:nth-child(3),
			.m-center div:nth-child(4),
			.m-center div:nth-child(5){
				float:left;
				background-color:white;
				width: 200px;
				height: 220px;
				margin-right: 50px;
				transition: 0.2s;
			}
			.m-first .m-center div:nth-child(5){
				margin-right: 0;
			}
			.m-first .m-center div:nth-child(1):hover,
			.m-first .m-center div:nth-child(2):hover,
			.m-first .m-center div:nth-child(3):hover,
			.m-first .m-center div:nth-child(4):hover,
			.m-first .m-center div:nth-child(5):hover{
				box-shadow:0px 3px 13px 0px gray ;
				cursor: pointer;
				margin-top: -5px;
			}
			.m-first .m-center div:nth-child(1) img,
			.m-first .m-center div:nth-child(2) img,
			.m-first .m-center div:nth-child(3) img,
			.m-first .m-center div:nth-child(4) img,
			.m-first .m-center div:nth-child(5) img{
				margin-top: 0;
				height: 113px;
			}
			.m-first .m-center div:nth-child(1) ul,
			.m-first .m-center div:nth-child(2) ul,
			.m-first .m-center div:nth-child(3) ul,
			.m-first .m-center div:nth-child(4) ul,
			.m-first .m-center div:nth-child(5) ul{
				display: inline-block;
				padding: 15px 14px;
			}
			.m-first .m-center div:nth-child(1) li,
			.m-first .m-center div:nth-child(2) li,
			.m-first .m-center div:nth-child(3) li,
			.m-first .m-center div:nth-child(4) li,
			.m-first .m-center div:nth-child(5) li{
				font-size: 14px;
			}
			.m-first .m-center div:nth-child(1) span,
			.m-first .m-center div:nth-child(2) span,
			.m-first .m-center div:nth-child(3) span,
			.m-first .m-center div:nth-child(4) span,
			.m-first .m-center div:nth-child(5) span{
				display: inline;
				font-size: 14px;
				margin: 15px;
				height: 20px;
				line-height: 20px;
				text-align:left;
			}
			.m-first .m-center div:nth-child(1) a,
			.m-first .m-center div:nth-child(2) a,
			.m-first .m-center div:nth-child(3) a,
			.m-first .m-center div:nth-child(4) a,
			.m-first .m-center div:nth-child(5) a{
				float: right;
				height: 20px;
				line-height: 20px;
				padding-left: 90px;
				color: #999999;
			}
			.footer{
				width: 100%;
				height: 200px;
				background-color: #282c30;
			}
			.footer .xinxi{
				margin: 0 auto;
				width: 1200px;
				height: 150px;
				border-bottom: 1px solid black;
			}
			.footer .xinxi .f-xinxi{
				float: left;
				width: 700px;
				height: 200px;
			}
			.footer .xinxi .f-xinxi2{
				float: left;
				width: 500px;
				height: 200px;
			
			}
			.footer .xinxi .f-xinxi ul{
				width: 500px;
				text-align: center;
				margin-left: 60px;
				margin-bottom: 20px;
			}
			.footer .xinxi .f-xinxi li {
				float: left;
				padding:10px 20px;
				margin-top: 50px;
				margin-bottom: 20px;
				font-size: 14px;
				border-right: 1px solid #999999;
				line-height: 5px;
				height: 5px;
				text-align: center;
				color: #999999;
			}
			
			.footer .xinxi .f-xinxi li:hover {
				cursor: pointer;
				color: #ffffff;
			}
			
			.footer .xinxi .f-xinxi li:nth-child(5) {
				border: 0;
			}
			
			.footer .xinxi .f-xinxi span {
				float: left;
				font-size: 14px;
				width: 700px;
				color: #666666;
			}
			
			.footer .xinxi .f-xinxi2 img {
				float: right;
				width: 100px;
				height: 100px;
				margin-top: 25px;
			}
			
			.footer .xinxi .f-xinxi2 span {
				width: 325px;
				display: block;
				font-size: 14px;
				margin-top: 60px;
				margin-left: 60px;
				color: #666666;
			}
			
			.footer .xinxi .f-xinxi2 p {
				font-size: 14px;
				width: 400px;
				margin-left: 5px;
				margin-top: 5px;
				color: #666666;
			}
			.guanggao{
				width: 50px;
				height: 200px;
				position: fixed;
				right: 20px;
				top:200px;
				z-index: 1000;
			}
			.guanggao ul{
				width: 50px;
			}
			.guanggao li{
				list-style: none;
				height: 50px;
				margin: 12.5px 0;
				text-align: center;
				line-height: 50px;
				border: #dddddd 1px solid;
				background-color: #ffffff;
				border-radius: 5px 5px 5px 5px;
			}
			.guanggao img{
				width: 35px;
				height: 35px;
				margin-top: 6px;
			}
			.guanggao ul li:hover{
				background-color:gainsboro;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="guanggao">
			<ul>
				<li><img src="./img/kec.png"></li>
				<li><img src="./img/线上服务.png"></li>
				<li><img src="./img/电话热线.png"></li>
			</ul>
		</div>
		<div class="header">
			<div class="header-center">
				<div class="left"><a href="#"><img src="img/tmooc-logo.png" /></a></div>
				<div class="center">
					<ul>
						<li><a href="#">首页</a></li>
						<li><a href="#">免费课</a></li>
						<li><a href="#">直播课</a></li>
						<li><a href="#">精品课</a></li>
						<li><a href="#">线上班 (VIP)</a></li>
						<li><a href="#">线下班</a></li>
						<li><a href="#">达内高手</a></li>
						<li><a href="#">高校专区</a></li>
					</ul>
				</div>
				<div class="right">
					<ul>
						<li><a href="" class="a-fist">注册</a></li>
						<li><a href="">登录</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="bg">
			<div class="banner">
				<div class="b-left">
					<ul>
						<li><a >前端/后端开发 ></a>
							<div class="b-1">
								<div><a>前端开发</a><a href="free.html">Web前端</a></div>
								<div><a>后端开发</a>
									<a>Java</a>
									<a>Python</a>
									<a>JAVA培优</a>
									<a>Go语言于区块链</a>
									<a>C#/.Net</a>
									<a>C/C++</a>
									<a>PHP</a></div>
								<div class="clear"></div>
								<div>
									<img src="./img/web-1.jpg"><img src="./img/web-2.jpg" />
								</div>
							</div>
						</li>
						<li><a href="#">大数据/云计算 ></a>
							<div class="b-2">
								<div><a>大数据</a><a>大数据</a></div>
								<div><a>云计算</a>
									<a>linux云计算</a>
								</div>
								<div class="clear"></div>
								<div><img src="img/dsj-1.jpg" /><img src="img/dsj-2.jpg" /></div>
							</div>
						</li>
						<li><a href="#">移动开发/游戏 ></a>
							<div class="b-3">
								<div><a>移动开发</a><a>小程序</a>
									<a>Android</a>
									<a>iOS</a></div>
								<div><a>游戏</a><a>Unity3D</a></div>
								<div class="clear"></div>
								<div>
									<img src="img/game-1.png" /><img src="img/game-2.png" /></div>
							</div>
						</li>
						<li><a href="#">物联网/测试 ></a>
							<div class="b-4">
								<div><a>物联网</a><a>嵌入式</a></div>
								<div><a>软件测试</a><a>软件测试</a>
									<div class="clear"></div>
									<div><img src="./img/wlw-1.png" /><img src="img/wlw-2.png" /></div>
								</div>
						</li>
						<li><a href="#">营销/产品/运营 ></a>
							<div class="b-5">
								<div><a>营销</a><a>网络营销</a><a>信息流</a></div>
								<div><a>运营</a><a>新媒体运营</a><a>高级电商</a><a>网络运营</a></div>
								<div class="clear"></div>
								<div><img src="img/2.png"><img src="img/3.png"></div>
							</div>
						</li>
						<li><a href="#">数字艺术 ></a>
							<div class="b-6">
								<div><a>数字艺术</a><a>UED设计</a><a>UID设计</a><a>视频剪辑</a></div>
								<div><a>平面设计</a><a>商业插画</a></div>
								<div class="clear"></div>
								<div><img src="img/1.jpg" /><img src="img/4.jpg" /></div>
							</div>
						</li>
						<li><a href="#">其他职业课程 ></a>
							<div class="b-7">
								<div><a>其他职业课程</a><a>网络运维与安全</a><a>ACC</a><a>HR</a></div>
								<div><a>就业指导</a><a>商业办公软件</a></div>
								<div class="clear"></div>
								<div><img src="img/5.jpg"><img src="img/web-1.jpg"></div>
							</div>
						</li>
					</ul>
				</div>
				<div class="b-right">
					<div class="box">
						<ul class="ul1" id="ul1">
							<li><img src="img/banner6.jpg" /></li>
							<li><img src="img/banner5.jpg" /></li>
							<li><img src="img/banner.jpg" /></li>
							<li><img src="img/banner7.png" /></li>

						</ul>
						<div class="left-botton index" id="left-botton">&lt;</div>
						<div class="right-botton index" id="right-botton">&gt;</div>
						<ul class="ul2 index" id="ul2">
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</div>
					<div class="r-down">
						<ul>
							<li>
								<img src="img/banner1.jpg" /><a href="#">高校专区</a>
							</li>
							<li>
								<img src="img/banner2.png" /><a href="">直播广场</a>
							</li>
							<li>
								<img src="img/banner3.png" /><a href="">最近活动</a>
							</li>
							<li>
								<img style="width: 32px;" src="img/banner4.png" /><a href="">会员课程</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="m-first">
				<div>
					<img src="img/课程.png" />
					<span>我的课程</span>
					<a href="#">查看更多>></a>
					<div class="clear"></div>
				</div>
				<div>
					<div onclick="window.location.href='kecheng.html'">
						<img src="img/img2019052301x.jpg" />
						<ul>
							<li>方向：Web前端开发工程师</li>
							<li>班级：WEBVN201223</li>
						</ul>
						<span>开通日期：2021/01/18</span>
					</div>
					<div>
						<img src="img/d98568e1db70459ebe24116058e3b351.jpg" />
						<ul>
							<li>WEB前端（WEB）跨年畅学班技术营</li>
						</ul>
						<span style="color: red;">￥399<a>1532人购买</a></span>
					</div>
					<div>
						<img src="img/6301BB0B4A8A42C1A98A5932AF60B583.jpg" />
						<ul>
							<li>【预习课】WEB前端开发工程师</li>
						</ul>
						<span style="color: #4f8dfe;">免费<a>5223人报名</a></span>
					</div>
				</div>
				<div class="afont">
					<img src="./img/直播%20播放%20摄像机%20观看%20面性.png" />
					<span>直播课</span>
					<a style="	height:70px ;
				color: #999999;
				float: right;
				line-height: 70px;
				font-size: 12px;" href="#">查看更多>></a>
					<div class="clear"></div>
					<div class="m-center">
						<div><img src="img/aab91230d2134d10a2ddf9d401abd52f.jpg" />
							<ul>
								<li>【限时免费】2月25日Java线上体验课</li>
							</ul>
							<span style="color: #4f8dfe;">免费<a>0人报名</a></span>
						</div>
						<div>
							<img src="img/bfb49d0ff0de401981c51c456516624c.jpg" />
							<ul>
								<li>【限时免费】2月25日UI线上体验课</li>
							</ul>
							<span style="color: #4f8dfe;">免费<a>0人报名</a></span>
						</div>
						<div>
							<img src="img/e2a318438dcd41e99892e73bf151e8af.jpg" />
							<ul>
								<li>【职达】360-设计师岗位的三十六计</li>
							</ul>
							<span style="color: #4f8dfe;">免费<a>9人报名</a></span>
						</div>
						<div>
							<img src="img/1b430a2b47c448c9ad27d8da91b30891.jpg" />
							<ul>
								<li>【职达】快手！设计师打怪升级攻略</li>
							</ul>
							<span style="color: #4f8dfe;">免费<a>9人报名</a></span>
						</div>
						<div>
							<img src="img/d4167e5378ba4ae9873ab291ba4fdf55.jpg">
							<ul>
								<li>职达【阿里】-技术岗面试攻略</li>
							</ul>
							<span style="color: #4f8dfe;">免费<a>9人报名</a></span>
						</div>


					</div>
				</div>
				<div class="clear"></div>
				<div class="afont">
					<img src="./img/会员.png" />
					<span>会员课</span>
					<a style="	height:70px ;
				color: #999999;
				float: right;
				line-height: 70px;
				font-size: 12px;" href="#">查看更多>></a>
					<div class="clear"></div>
					<div class="m-center">
						<div><img src="img/2.png" />
							<ul>
								<li>一周上手小程序</li>
							</ul>
							<span style="color: red; padding-left: 0; font-weight: 550;">￥1.00（会员免费）<a style="font-weight: 500;">7,962人报名</a></span>
						</div>
						<div>
							<img src="img/8D4204DFC45C40BCBF68150E442E1D18.png" />
							<ul>
								<li>商业插画零基础手绘教程</li>
							</ul>
							<span style="color: red; padding-left: 0; font-weight: 550;">￥599.00（会员免费）<a style="font-weight: 500;">4,421人报名</a></span>
						</div>
						<div>
							<img src="img/94D557C1DBB44FDA909B3B2BDC433A28.png" />
							<ul>
								<li>Linux系统管理</li>
							</ul>
							<span style="color: red; padding-left: 0; font-weight: 550;">￥199.00（会员免费）<a style="font-weight: 500;">2,204人报名</a></span>
						</div>
						<div>
							<img src="img/C564BF79E60A4230B67F23553702F025.png" />
							<ul>
								<li>功能测试工具（QTP）</li>
							</ul>
							<span style="color: red; padding-left: 0; font-weight: 550;">￥59.00（会员免费）<a style="font-weight: 500;">1823人报名</a></span>
						</div>
						<div>
							<img src="img/25D64D24BF544A2FB2FFD0FA328B70F0.png">
							<ul>
								<li>PR基础特效集合</li>
							</ul>
							<span style="color: red; padding-left: 0; font-weight: 550;">￥1.00（会员免费）<a style="font-weight: 500;">2146人报名</a></span>
						</div>


					</div>
				</div>
				<div class="clear"></div>
				<div class="afont">
					<img src="./img/精品.png" />
					<span>精品课</span>
					<a style="	height:70px ;
				color: #999999;
				float: right;
				line-height: 70px;
				font-size: 12px;" href="#">查看更多>></a>
					<div class="clear"></div>
					<div class="m-center">
						<div><img src="img/f2b39759be9842ae86cfd62294a8e665.png" />
							<ul>
								<li>达内在线数据分析实战训练营2020期-12班</li>
							</ul>
							<span style="color: red; padding-left: 0; font-weight: 550; width: 171px;">￥8800.00<a style="font-weight: 500;padding-left: 22px;">2,466人报名</a></span>
						</div>
						<div>
							<img src="img/7e5f23d6a3c347ebb4387ee8f3131ff8.jpg" />
							<ul>
								<li>达内在线Python办公自动化课程2020期-12班</li>
							</ul>
							<span style="color: red; padding-left: 0; font-weight: 550; width: 171px;">￥2080.00<a style="font-weight: 500;padding-left: 22px;">3,668人报名</a></span>
						</div>
						<div>
							<img src="img/0de00f2e44fe484dace26b43cfd2673a.jpg" />
							<ul>
								<li>达内在线平面设计极速入职课2020期-12班</li>
							</ul>
							<span style="color: red; padding-left: 0; font-weight: 550; width: 171px;">￥7800.00<a style="font-weight: 500;padding-left: 22px;">2,614人购买</a></span>
						</div>
						<div>
							<img src="img/67d628c584ee434ba3916c763b8e0e93.jpg" />
							<ul>
								<li>达内在线商业插画2020期-09班</li>
							</ul>
							<span style="color: red; padding-left: 0; font-weight: 550; width: 171px;">￥9800.00<a style="font-weight: 500;padding-left: 22px;">1,534人购买</a></span>
						</div>
						<div>
							<img src="img/29cb3feb51d247d1afbfacf4d361ec76.jpg">
							<ul>
								<li>达内在线视频剪辑2020期-09班</li>
							</ul>
							<span style="color: red; padding-left: 0; font-weight: 550; width: 171px;">￥9900.00<a style="font-weight: 500;  padding-left: 22px;">1,684人购买</a></span>
						</div>


					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="footer">
			<div class="xinxi">
				<div class="f-xinxi">
					<ul>
						<li>关于我们</li>
						<li>招聘信息</li>
						<li>联系我们</li>
						<li>商务合作</li>
						<li>帮助页面</li>
					</ul>
					<span>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号
					</span>
				</div>
				<div class="f-xinxi2">
					<img src="img/erweima.jpg">
					<span>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</span>
					<p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var imgs = document.getElementById("ul1").children;
			var leftbotton = document.getElementById("left-botton");
			var rightbotton = document.getElementById("right-botton");
			var botton = document.getElementById("ul2").children;
			var index = 0;
			var dingshiqi;
			chongqi();

			function chongqi() {
				dingshiqi = setInterval(function() {
					index++;
					if (index == imgs.length) {
						index = 0;
					}
					for (var i = 0; i < imgs.length; i++) {
						imgs[i].style.cssText = 'z-index:0;';
						botton[i].style.cssText = "background-color: #fff;color: #000; transition: 1s"
					}
					imgs[index].style.cssText = 'z-index:100;';
					botton[index].style.cssText = "background-color: red;color: #fff; transition: 1s"
				}, 2000);
			}

			leftbotton.onclick = function() {
				clearInterval(dingshiqi);

				index--;
				if (index < 0) {
					index = imgs.length - 1;
				}
				for (var i = 0; i < imgs.length; i++) {
					imgs[i].style.cssText = 'z-index:0: ;'
					botton[i].style.cssText = "background-color: #fff;color: #000; transition: 1s"
				}
				imgs[index].style.cssText = 'z-index:100;';
				botton[index].style.cssText = "background-color: red;color: #fff; transition: 1s"
				chongqi();
			}
			rightbotton.onclick = function() {
				clearInterval(dingshiqi);
				index++;
				if (index == imgs.length) {
					index = 0;
				}
				for (var i = 0; i < imgs.length; i++) {
					imgs[i].style.cssText = 'z-index:0: ;'
					botton[i].style.cssText = "background-color: #fff;color: #000; transition: 1s"
				}
				imgs[index].style.cssText = 'z-index:100;';
				botton[index].style.cssText = "background-color: red;color: #fff; transition: 1s"
				chongqi();
			}
			botton[0].onmousemove = function() {
				clearInterval(dingshiqi);
				index = 0;
				for (var i = 0; i < imgs.length; i++) {
					imgs[i].style.cssText = 'z-index:0:;';
					botton[i].style.cssText = "background-color: #fff;color: #000; transition: 1s"
				}
				imgs[index].style.cssText = 'z-index:100;'
				botton[0].style.cssText = "background-color: red;color: #fff; transition: 1s";
				chongqi();
			}
			botton[1].onmousemove = function() {
				clearInterval(dingshiqi);
				index = 1;
				for (var i = 0; i < imgs.length; i++) {
					imgs[i].style.cssText = 'z-index:0: ;';
					botton[i].style.cssText = "background-color: #fff;color: #000; transition: 1s"
				}
				imgs[index].style.cssText = 'z-index:100;';
				botton[1].style.cssText = "background-color: red;color: #fff; transition: 1s";
				chongqi();
			}
			botton[2].onmousemove = function() {
				clearInterval(dingshiqi);
				index = 2;
				for (var i = 0; i < imgs.length; i++) {
					imgs[i].style.cssText = 'z-index:0: ;';
					botton[i].style.cssText = "background-color: #fff;color: #000; transition: 1s"
				}
				imgs[index].style.cssText = 'z-index:100;';
				botton[2].style.cssText = "background-color: red;color: #fff; transition: 1s";
				chongqi();
			}
			botton[3].onmousemove = function() {
				clearInterval(dingshiqi);
				index = 3;
				for (var i = 0; i < imgs.length; i++) {
					imgs[i].style.cssText = 'z-index:0: ;';
					botton[i].style.cssText = "background-color: #fff;color: #000; transition: 1s"
				}
				imgs[index].style.cssText = 'z-index:100;';
				botton[3].style.cssText = "background-color:red;color: #fff; transition: 1s";
				chongqi();
			}
		</script>
	</body>
</html>
